<template>
	<view class="content">
		<view :class="isload ? 'bullet-wrap-loading' : 'hd-bullet__wrap'" class="hd-bullet__wrap">
			<view class="hd-bullet__wrap__titleText">
				<text class="hd-bullet__wrap__titleText__left">{{option.title}}</text>
				<text class="hd-bullet__wrap__titleText__right">{{option.subTitle}}</text>
			</view>
			<view class="hd-bullet__wrap__valueText" :style="{color : ValueColor}">
				<text>{{option.val + ' '}}</text>
				<text>{{option.unit}}</text>
			</view>
			<view class="hd-bullet__wrap__barWrap">
				<view class="hd-bullet__wrap__barWrap__bar">
					<view class="hd-bullet__wrap__barWrap__bar__left"></view>
					<view class="hd-bullet__wrap__barWrap__bar__barBox">
						<view class="hd-bullet__wrap__barWrap__bar__barBox__l"
							:style="{'background-color':leftBarColor}"></view>
						<view class="hd-bullet__wrap__barWrap__bar__barBox__m"
							:style="{'background-color':midBarColor}"></view>
						<view class="hd-bullet__wrap__barWrap__bar__barBox__r"
							:style="{'background-color':rightBarColor}"></view>
						<view :style="barLeftValue" class="hd-bullet__wrap__barWrap__bar__barBox__val"></view>
					</view>
					<view class="hd-bullet__wrap__barWrap__bar__right"></view>
				</view>
				<view class="hd-bullet__wrap__barWrap__min-max-box">
					<view class="hd-bullet__wrap__barWrap__min-max-box__item" v-for="(item,index) in barData"
						:key="index">
						<view class="hd-bullet__wrap__barWrap__min-max-box__item__t-t"></view>
						<text class="hd-bullet__wrap__barWrap__min-max-box__item__b-t">{{item}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hd-bullet",
		props: {
			options: { // 子弹图配置数据
				type: Object,
				default: () => ({})
			},
			animation: { // 是否开启bar的动画效果
				type: Boolean,
				default: true
			},
			animationTime: { // bar动画时长
				type: Number,
				default: 400
			},
			loading: { // 是否开启动画
				type: Boolean,
				default: true
			},
			leftBarColor: {
				type: String,
				default: '#4488ef'
			},
			midBarColor: {
				type: String,
				default: '#10b981'
			},
			rightBarColor: {
				type: String,
				default: '#ef4444'
			}
		},
		data() {
			return {
				barLeftValue: {},
				isload: this.loading,
			}
		},
		created() {
			this.isLoad();
			this.initBullet();
		},
		methods: {
			initBullet() {
				if (this.option && Object.keys(this.option).length > 0) {
					this.updateBarLeftValue(this.option.val, true);
				} else {
					this.barLeftValue = {};
				}
			},
			isLoad() {
				if (this.option && Object.keys(this.option).length > 0 && this.isload === true) {
					setTimeout(() => {
						this.isload = false;
						this.updateBarLeftValue(this.option.val, true);
					}, 500);
				} else {
					this.isload = true;
				}
			},
			updateBarLeftValue(val, initialLoad = false) {
				if (val !== undefined) {
					setTimeout(() => {
						this.barLeftValue = {
							left: this.calculateLeftValue(val),
							'background-color': this.ValueColor,
							'transition': this.animation ? this.animationTime + 'ms' : '0ms',
						};
					}, initialLoad ? 800 : 0);
				}
			},
			calculateLeftValue(val) {
				const min = Number(this.option.min);
				const max = Number(this.option.max);
				if (max === min) {
					return '0%'; // 避免除以0的情况
				}
				const percentage = (val - min) / (max - min);
				let calculatedPercentage = (percentage < 0) ? '0%' : (percentage > 1) ? '100%' : (percentage * 100) + '%';
				return `calc(${calculatedPercentage} - 4px)`;
			}
		},
		watch: {
			'option.val': function(newVal) {
				this.updateBarLeftValue(newVal);
			}
		},
		computed: {
			option() {
				return { ...this.options }
			},
			barData() {
				const barData = [];
				const startValue = Number(this.option.val) < Number(this.option.min) ? Number(this.option.val) : Number(this.option.min);
				const endValue = Number(this.option.val) > Number(this.option.max) ? Number(this.option.val) : Number(this.option.max);
				const totalNumbers = 11;
				const step = (endValue - startValue) / (totalNumbers - 1);
				barData.push(startValue);
				for (let i = 1; i < totalNumbers - 1; i++) {
					const value = startValue + i * step;
					barData.push(Math.round(value)); // 取整
				}
				barData.push(endValue);
				return barData;
			},
			ValueColor() {
				let colorValue = '';
				const min = Number(this.option.min);
				const max = Number(this.option.max);
				const val = Number(this.option.val);
				const range = max - min;

				if (range === 0) {
					return this.rightBarColor; // 避免除以0的情况
				}

				const dataValue = (val - min) / range;

				if (dataValue < 0.25) {
					colorValue = this.leftBarColor;
				} else if (dataValue >= 0.25 && dataValue <= 0.75) {
					colorValue = this.midBarColor;
				} else if (dataValue > 0.75) {
					colorValue = this.rightBarColor;
				}
				return colorValue;
			}
		}
	}
</script>

<style lang="scss">
	.hd-bullet__wrap {
		width: 100%;
		height: 150px;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		border-radius: 8px;
		margin-bottom: 20rpx;
		transition: transform 0.2s ease;
		transform: scale(1);
		opacity: 1;


		&__titleText {
			margin: 10px auto 0 10px;
			display: flex;
			flex-direction: row;
			width: calc(100% - 20px);

			&__left {
				font-size: 16px;
				font-weight: 700;
				color: #434363;
			}

			&__right {
				color: #434363;
				font-size: 14px;
				margin: auto 0 auto auto;
			}
		}

		&__valueText {
			font-size: 18px;
			font-weight: 700;
			color: #434363;
			margin: 5px auto auto 10px;
		}

		&__barWrap {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;

			&__bar {
				display: flex;
				width: 100%;
				height: 30px;

				&__left {
					flex: 1;
				}

				&__right {
					flex: 1;
				}


				&__barBox {
					height: 20px;
					flex: 20;
					display: flex;
					flex-direction: row;
					margin: auto;
					position: relative;


					&__val {
						position: absolute;
						height: 26px;
						width: 4px;
						border: #FFF solid 2px;
						left: -4px;
						z-index: 1;
						background-color: #4488ef;
						border-radius: 100px;
						top: -5px;
					}


					&__l {
						// background-color: #4488ef;
						border-top-left-radius: 100px;
						border-bottom-left-radius: 100px;
						height: 10px;
						flex-grow: 1;
						margin: auto 0 auto;
					}

					&__m {
						// background-color: #10b981;
						height: 10px;
						flex-grow: 2;
						margin: auto 0 auto;
					}

					&__r {
						// background-color: #ef4444;
						border-top-right-radius: 100px;
						border-bottom-right-radius: 100px;
						height: 10px;
						flex-grow: 1;
						margin: auto 0 auto;
					}
				}
			}

			&__min-max-box {
				display: flex;
				flex-direction: row;
				height: 50px;
				width: auto;

				&__item {
					flex: 1;
					height: auto;
					display: flex;
					flex-direction: column;

					&__t-t {
						margin: 5px auto 0 auto;
						height: 10px;
						width: 1px;
						background-color: #b9b9c5;

					}

					&__b-t {
						margin: 0 auto;
						font-size: 10px;
						color: #b9b9c5;
						transform: rotate(-45deg);
						font-weight: 700;
					}
				}
			}
		}
	}

	.content {
		width: 100%;
		height: 150px;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		border-radius: 8px;
		margin-bottom: 20rpx;
	}

	.bullet-wrap-loading {
		width: 100%;
		height: 150px;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		border-radius: 8px;
		margin-bottom: 20rpx;
		// transition: transform 0.1s ease;
		transform: scale(0.8);
		opacity: 0;
	}
</style>
